<!DOCTYPE html>
<html>
<head>
  <title>Hacked</title>
  <script src="./js/jquery-3.1.0.min.js"></script>
  <script src="./js/word data.js"></script>
  <link href="./css/style.css" rel="stylesheet"></link>
  <link href="./css/transform.css" rel="stylesheet"></link>

  <style type="text/css">
    body{
      background-color: black;
      overflow: hidden;
    }
  </style>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var documentHeight = $(document).height();
    var imageHeight = 188;
    var imageTop = ((documentHeight - imageHeight) / 2);
    var imageTopExtra = imageTop - (231 * -1);
    $('.one ul').css('top', imageTop);

    var NumOne = 21, NumTwo = 16, NumThree = 11, NumFour = 6, NumFive = 0;
    function ranNum(x, y){
      return Math.floor((Math.random()*x)+y);
    }
    var ranNumOne = Math.floor((Math.random()*4));
    var ranNumTwo = Math.floor((Math.random()*4));

    var animTopOne = ranNum(NumThree, NumFour) * -1;
    var animTopTwo = ranNum(NumFour, NumFive);
    var animLeftOne = ranNum(NumOne, NumTwo);
    var animLeftTwo = ranNum(NumOne, NumTwo) * -1;

    function changeToMinus(Num, randomNum){
      if(randomNum == 0 || randomNum == 2){
        return Num*1;
      }
      else{
        return Num*-1;
      }
    }

    animLeftOne = changeToMinus(animLeftOne, ranNumOne);
    animLeftTwo = changeToMinus(animLeftTwo, ranNumTwo);

    function glitching(){
      $('.one ul li:nth-child(1)').animate({
        'top' : animTopOne,
        'left' : animLeftOne,
        'opacity' : '0.3'
      }, 10);
      $('.one ul li:nth-child(1)').animate({
        'top' : animTopTwo,
        'left' : animLeftTwo,
        'opacity' : '0.3'
      }, 10);
      $('.one ul li:nth-child(1)').animate({
        'top' : '0',
        'left' : '0',
        'opacity' : '1.0'
      }, 10);
    }

    setTimeout(function(){
      glitching();
      $('.one ul li:nth-child(1) img:nth-child(1)').attr('src', './image/lock glitch.png');
      setTimeout(glitching, 7500);
    }, 4000);
  });
  </script>

  <script lanuage="javascript" type="text/javascript">
  $(document).ready(function(){
    var posOne = {x: 58, y: 1};
    var posTwo = {x: 58, y: 1};
    var posThr = {x: 58, y: 23};
    var posFou = {x: 58, y: 23};
    setTimeout(draw, 9000);
    function draw(){
      var ctx = document.getElementById('canvasOne').getContext('2d');

      ctx.clearRect(0, 0, 300, 300);

      ctx.beginPath();
      ctx.moveTo(58, 0);
      ctx.lineTo(posOne.x, 0);
      ctx.moveTo(116, 1);
      ctx.lineTo(116, posOne.y);
      ctx.strokeStyle = 'white';
      ctx.stroke();
      ctx.closePath();
      if(posOne.x <= 116){
        posOne.x += 3;
      }
      if(posOne.x >= 116 && posOne.y < 11){
        posOne.y += 2;
      }

      ctx.beginPath();
      ctx.moveTo(58, 0);
      ctx.lineTo(posTwo.x, 0);
      ctx.moveTo(0, 1);
      ctx.lineTo(0, posTwo.y);
      ctx.strokeStyle = 'white';
      ctx.stroke();
      ctx.closePath();
      if(posTwo.x >= 0){
        posTwo.x -= 3;
      }
      if(posTwo.x <= 0 && posTwo.y < 11){
        posTwo.y += 2;
      }

      ctx.beginPath();
      ctx.moveTo(58, 24);
      ctx.lineTo(posThr.x, 24);
      ctx.moveTo(116, 23);
      ctx.lineTo(116, posThr.y);
      ctx.strokeStyle = 'white';
      ctx.stroke();
      ctx.closePath();
      if(posThr.x <= 116){
        posThr.x += 3;
      }
      if(posThr.x > 115 && posThr.y > 11){
        posThr.y -= 2;
      }

      ctx.beginPath();
      ctx.moveTo(58, 24);
      ctx.lineTo(posFou.x, 24);
      ctx.moveTo(0, 23);
      ctx.lineTo(0, posFou.y);
      ctx.strokeStyle = 'white';
      ctx.stroke();
      ctx.closePath();
      if(posFou.x >= 0){
        posFou.x -= 3;
      }
      if(posFou.x < 0 && posFou.y > 11){
        posFou.y -= 2;
      }

      requestAnimationFrame(draw);
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var documentHeight = $(document).height();
    var documentWidth = $(document).width();
    var cmdOne = $('.two ul:nth-of-type(1) li:nth-child(1) ul');
    var cmdTwo = $('.two ul:nth-of-type(1) li:nth-child(2) ul');
    var cmdThr = $('.two ul:nth-of-type(1) li:nth-child(3) ul');
    var cmdFou = $('.two ul:nth-of-type(1) li:nth-child(4) ul');

    var divDocumentWidthOne = documentWidth / 2;
    var divDocumentWidthTwo = documentWidth / 4;
    var subDocumentWidth = documentWidth - 620;
    var subHeight = documentHeight - 420;

    function ranNum(x, y){
      return Math.floor((Math.random()*x)+y);
    }

    var cmdTopOne = ranNum(subHeight, 0);
    var cmdLeftOne = ranNum(divDocumentWidthOne, 0);

    var cmdTopTwo = ranNum(subHeight, 0);
    var cmdLeftTwo = ranNum(divDocumentWidthOne, 0);

    var cmdTopThr = ranNum(subHeight, 0);
    var cmdLeftThr = ranNum(divDocumentWidthTwo, divDocumentWidthOne);

    var cmdTopFou = ranNum(subHeight, 0);
    var cmdLeftFou = ranNum(divDocumentWidthTwo, divDocumentWidthOne);
    cmdOne.css({
      'top' : cmdTopOne,
      'left' : cmdLeftOne
    });
    cmdTwo.css({
      'top' : cmdTopTwo,
      'left' : cmdLeftTwo
    });
    cmdThr.css({
      'top' : cmdTopThr,
      'left' : cmdLeftThr
    });
    cmdFou.css({
      'top' : cmdTopFou,
      'left' : cmdLeftFou
    });
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '', clearThis;
    setTimeout(timeOut, 5100);
    setTimeout(clearFunc, 8000);
    function clearFunc(){
      clearTimeout(clearThis);
    }
    function timeOut(){
      var sentence = '', speed = 1, i = 0;
      var randomNounOne = Math.floor(Math.random()*ArryNoun.length),
          randomNounTwo = Math.floor(Math.random()*ArryNoun.length),
          randomVerb = Math.floor(Math.random()*ArryVerb.length),
          randomAdj  = Math.floor(Math.random()*ArryAdj.length);
          randomAdv = Math.floor(Math.random()*ArryAdv.length);

      sentence = ArryNoun[randomNounOne]+' '+ArryVerb[randomVerb]+' '+ArryAdj[randomAdj]+' '+ArryNoun[randomNounTwo]+' '+ArryAdv[randomAdv]+'. ';

      typeWriter();
      function typeWriter(){
        if (i < sentence.length) {
          $('.two ul:nth-of-type(1) li:nth-child(1) ul li:nth-child(2) p').html(function() {
            mass += sentence.charAt(i);
            return mass;
          });
          i++;
          setTimeout(typeWriter, speed);
        }
      }
      /*if(mass.length > 1000){
        mass = mass.substring(100,mass.length);
      }*/

      loopFunc();
      function loopFunc() {
        clearThis = setTimeout(timeOut, (speed*sentence.length));
      }
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '', clearThis;
    var ArrySen = ['0', '1'];
    setTimeout(timeOut, 5250);
    setTimeout(clearFunc, 8000);
    function clearFunc(){
      clearTimeout(clearThis);
    }
    function timeOut(){
      var sentence = '', speed = 1, i = 0;
      var randomNumOne = Math.floor((Math.random()*2)),
          randomNumTwo = Math.floor((Math.random()*2)),
          randomNumThr = Math.floor((Math.random()*2)),
          randomNumFou = Math.floor((Math.random()*2));

      sentence = ArrySen[randomNumOne]+ArrySen[randomNumTwo]+ArrySen[randomNumThr]+ArrySen[randomNumFou];

      typeWriter();
      function typeWriter(){
        if (i < sentence.length) {
          $('.two ul:nth-of-type(1) li:nth-child(2) ul li:nth-child(2) p').html(function() {
            mass += sentence.charAt(i);
            return mass;
          });
          i++;
          setTimeout(typeWriter, speed);
        }
      }
      /*if(mass.length > 1000){
        mass = mass.substring(100,mass.length);
      }*/

      loopFunc();
      function loopFunc() {
        clearThis = setTimeout(timeOut, (speed*sentence.length));
      }
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '', clearThis;
    var ArrySen = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
    setTimeout(timeOut, 5400);
    setTimeout(clearFunc, 8000);
    function clearFunc(){
      clearTimeout(clearThis);
    }
    function timeOut(){
      var sentence = '', speed = 1, i = 0;
      var randomNumOne = Math.floor((Math.random()*16)),
          randomNumTwo = Math.floor((Math.random()*16)),
          randomNumThr = Math.floor((Math.random()*16)),
          randomNumFou = Math.floor((Math.random()*16));

      sentence = '0x'+ArrySen[randomNumOne]+ArrySen[randomNumTwo]+ArrySen[randomNumThr]+ArrySen[randomNumFou];

      typeWriter();
      function typeWriter(){
        if (i < sentence.length) {
          $('.two ul:nth-of-type(1) li:nth-child(3) ul li:nth-child(2) p').html(function() {
            mass += sentence.charAt(i);
            return mass;
          });
          i++;
          setTimeout(typeWriter, speed);
        }
      }
      /*if(mass.length > 1000){
        mass = mass.substring(100,mass.length);
      }*/

      loopFunc();
      function loopFunc() {
        clearThis = setTimeout(timeOut, (speed*sentence.length));
      }
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '', clearThis;
    var ArrySen = ['0', '1', '2', '3', '4', '5', '6', '7'];
    setTimeout(timeOut, 5550);
    setTimeout(clearFunc, 8000);
    function clearFunc(){
      clearTimeout(clearThis);
    }
    function timeOut(){
      var sentence = '', speed = 1, i = 0;
      var randomNumOne = Math.floor((Math.random()*8)),
          randomNumTwo = Math.floor((Math.random()*8)),
          randomNumThr = Math.floor((Math.random()*8)),
          randomNumFou = Math.floor((Math.random()*8));

      sentence = '0'+ArrySen[randomNumOne]+ArrySen[randomNumTwo]+ArrySen[randomNumThr]+ArrySen[randomNumFou];

      typeWriter();
      function typeWriter(){
        if (i < sentence.length) {
          $('.two ul:nth-of-type(1) li:nth-child(4) ul li:nth-child(2) p').html(function() {
            mass += sentence.charAt(i);
            return mass;
          });
          i++;
          setTimeout(typeWriter, speed);
        }
      }
      /*if(mass.length > 1000){
        mass = mass.substring(100,mass.length);
      }*/
      loopFunc();
      function loopFunc() {
        clearThis = setTimeout(timeOut, (speed*sentence.length));
      }
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    setTimeout(function(){
      $('.two ul:nth-of-type(1) li ul').fadeOut(10);
    }, 8100);
    setTimeout(function(){
      $('.one ul li:nth-child(2), .one ul li:nth-child(3), .one ul li:nth-child(4)').fadeOut(200);
    }, 11000);
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){

  	var i = 0;
  	var txt = '* * * *';
  	var speed = 50;
  	var text = '';
    var blank = '';
    setTimeout(function(){
      $('.one ul li:nth-child(3) p').html(blank);
    }, 10250);
  	setTimeout(typeWriter, 9800);
    function typeWriter(){
  		if (i < txt.length) {
  			$('.one ul li:nth-child(3) p').html(function() {
  				text += txt.charAt(i);
  				return text;
  			});
  			i++;
  			setTimeout(typeWriter, speed);
  		}
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){

  	var i = 0;
  	var txt = 'Passwords match';
  	var speed = 30;
  	var text = '';
    var blank = '';
  	setTimeout(typeWriter, 11200);
    function typeWriter(){
  		if (i < txt.length) {
  			$('.one ul li:nth-child(5) p').html(function() {
  				text += txt.charAt(i);
  				return text;
  			});
  			i++;
  			setTimeout(typeWriter, speed);
  		}
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    setTimeout(function(){
      $('#op_wrap').fadeOut(200);
    }, 13000);

    var documentHeight = $(document).height();
    var appsHeight = $('#apps_wrap').height();
    var subHeight = documentHeight - appsHeight;
    var appsTop = subHeight / 2;

    if(documentHeight > appsHeight){
      $('#apps_wrap').css('top', appsTop);
    }

  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    function pad(val){ return val > 9 ? val : "0" + val; }
     var count = 0, s = 0, m = 0, h = 0, d = 0;

    setTimeout(timer, 13000);
    function timer(){
       /* $("#seconds").html(pad(++sec%60)); */
       count++;
       s = pad(parseInt(count%60));
       m = pad(parseInt((count/60)%60, 10));
       h = pad(parseInt((count/3600)%24, 10));
       d = pad(parseInt((count/3600/24)%99, 10));

      $('.app_one ul li:nth-child(2) p').html(d+":"+h+":"+m+":"+s);
      $('.app_fou ul li:nth-child(2) p:nth-child(3)').html(d+":"+h+":"+m+":"+s);

      setTimeout(timer, 1000);
    }

    randomNumber();
    function randomNumber(){
      var randomNumOne = Math.floor((Math.random()*6)),
          randomNumTwo = Math.floor((Math.random()*9)+1),
          randomNumThr = Math.floor((Math.random()*9)+1),
          randomNumFou = Math.floor((Math.random()*9)+1);

      $('.app_fou ul li:nth-child(2) p:nth-child(1)').html(randomNumOne+' running');
      $('.app_fou ul li:nth-child(2) p:nth-child(2)').html('0.'+randomNumTwo+'s '+'0.'+randomNumThr+'s '+'0.'+randomNumFou+'s');

      setTimeout(randomNumber, 2000);
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '', count = 0;
    timeOut();
    function timeOut(){
      var sentence = '', speed = 25, i = 0;
      var randomNounOne = Math.floor(Math.random()*ArryNoun.length);

      sentence = ArryNoun[randomNounOne]+'<br>';

      $('.app_one ul li:nth-child(3) p:nth-child(1)').html(function() {
        mass += sentence;
        return mass;
      });
      if(count > 12){
        mass = mass.substring(mass.indexOf('<br>')+'<br>'.length,mass.length);
      }
      count++;
      /*if(mass.length > 1000){
        mass = mass.substring(100,mass.length);
      }*/

      setTimeout(timeOut, 400);
    }
  });
  </script>
  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '', count = 0;
    setTimeout(timeOut, 100);
    function timeOut(){
      var sentence = '', speed = 25, i = 0;
      var randomNounOne = Math.floor(Math.random()*ArryNoun.length);

      sentence = ArryNoun[randomNounOne]+'<br>';

      $('.app_one ul li:nth-child(3) p:nth-child(2)').html(function() {
        mass += sentence;
        return mass;
      });
      if(count > 12){
        mass = mass.substring(mass.indexOf('<br>')+'<br>'.length,mass.length);
      }
      count++;
      /*if(mass.length > 1000){
        mass = mass.substring(100,mass.length);
      }*/

      setTimeout(timeOut, 400);
    }
  });
  </script>
  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '', count = 0;
    setTimeout(timeOut, 200);
    function timeOut(){
      var sentence = '', speed = 25, i = 0;
      var randomNounOne = Math.floor(Math.random()*ArryNoun.length);

      sentence = ArryNoun[randomNounOne]+'<br>';

      $('.app_one ul li:nth-child(3) p:nth-child(3)').html(function() {
        mass += sentence;
        return mass;
      });
      if(count > 12){
        mass = mass.substring(mass.indexOf('<br>')+'<br>'.length,mass.length);
      }
      count++;
      /*if(mass.length > 1000){
        mass = mass.substring(100,mass.length);
      }*/

      setTimeout(timeOut, 400);
    }
  });
  </script>

  <script lanuage="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '', logOne = '', logTwo = '', logThr = '', count = 0;
    keyboard = function(element){
      if(element > 10){
        element = String.fromCharCode(element);
        mass += element;
      }
      else{
        mass += element;
      }
      $('.app_fou ul:nth-child(1) li:nth-child(5) p').html(mass);
    }
    clearESC = function(){
      $('.app_fou ul:nth-child(1) li:nth-child(5) p').html(function(){
        mass = '';
        return mass;
      });
    }
    clearBACK = function(){
      mass = mass.substr(0, (mass.length-1));
      $('.app_fou ul:nth-child(1) li:nth-child(5) p').html(mass);
    }
    clearENTER = function(){
      var arry = [], randomNumOne = Math.floor((Math.random()*10)), randomNumTwo = Math.floor((Math.random()*100));
      count++;

      if(mass != ''){
        $('.apps ul li').css('background-color', mass);
        $('.app_one ul li:nth-child(3) p, .app_two ul li:nth-child(3) p, .app_two ul li:nth-child(4) p, .app_thr p, .app_fou p, .app_fiv p, .app_six p').css('color', mass);
        arry[0] = mass;
        ctxOne.fillStyle = arry[0];
        ctxTwo.fillStyle = arry[0];
        grd.addColorStop(0, mass);
        grd1.addColorStop(0, mass);
        grd2.addColorStop(0, mass);
        grd3.addColorStop(0, mass);
      }
      else{
        $('.apps ul li').css('background-color', 'white');
        $('.app_one ul li:nth-child(3) p, .app_two ul li:nth-child(3) p, .app_two ul li:nth-child(4) p, .app_thr p, .app_fou p, .app_fiv p, .app_six p').css('color', 'white');
        ctxOne.fillStyle = 'white';
        ctxTwo.fillStyle = 'white';
        grd.addColorStop(0, 'white');
        grd1.addColorStop(0, 'white');
        grd2.addColorStop(0, 'white');
        grd3.addColorStop(0, 'white');
      }

      typeLog();
      function typeLog(){
        logOne += count+'<br>';
        logTwo += '[ '+mass+'<br>';
        logThr += randomNumTwo+'.'+randomNumOne+'% ]'+'<br>';

        $('.app_fou ul:nth-child(1) li:nth-child(6) p:nth-child(1)').html(logOne);
        $('.app_fou ul:nth-child(1) li:nth-child(6) p:nth-child(2)').html(logTwo);
        $('.app_fou ul:nth-child(1) li:nth-child(6) p:nth-child(3)').html(logThr);

        if(count > 8){
          $('.app_fou ul:nth-child(1) li:nth-child(6) p:nth-child(1)').html(function(){
            logOne = logOne.substring(logOne.indexOf('<br>')+'<br>'.length,logOne.length);
            return logOne;
          });
          $('.app_fou ul:nth-child(1) li:nth-child(6) p:nth-child(2)').html(function(){
            logTwo = logTwo.substring(logTwo.indexOf('<br>')+'<br>'.length,logTwo.length);
            return logTwo;
          });
          $('.app_fou ul:nth-child(1) li:nth-child(6) p:nth-child(3)').html(function(){
            logThr = logThr.substring(logThr.indexOf('<br>')+'<br>'.length,logThr.length);
            return logThr;
          });
        }
      }

      $('.app_fou ul:nth-child(1) li:nth-child(5) p').html(function(){
        mass = '';
        return mass;
      });
    }

    var posOne = {x: 0, y: -69, z: -138, w: -207, o: -276, l: -345, p: -414};
    var posTwo = {x: 0, y: -69, z: -138, w: -207, o: -276, l: -345, p: -414};

    var widthingOne = 1;
    var ctxOne = document.getElementById('canvasTwo').getContext('2d');
    ctxOne.fillStyle = 'white';

    var widthingTwo = 0.5;
    var ctxTwo = document.getElementById('canvasThr').getContext('2d');
    ctxTwo.fillStyle = 'white';

    drawOne();
    drawTwo();

    var c = 0.7;
    var zero = 0;
    var ctx = document.getElementById('canvas1').getContext('2d');
    var grd = ctx.createLinearGradient(0,27,0,0);
    grd.addColorStop(0, 'white');
    grd.addColorStop(1, 'black');

    var c1 = 0.9;
    var zero1 = 0;
    var ctx1 = document.getElementById('canvas2').getContext('2d');
    var grd1 = ctx1.createLinearGradient(0,27,0,0);
    grd1.addColorStop(0, 'white');
    grd1.addColorStop(1, 'black');

    var c2 = 0.7;
    var zero2 = 0;
    var ctx2 = document.getElementById('canvas3').getContext('2d');
    var grd2 = ctx2.createLinearGradient(0,27,0,0);
    grd2.addColorStop(0, 'white');
    grd2.addColorStop(1, 'black');

    var c3 = 0.9;
    var zero3 = 0;
    var ctx3 = document.getElementById('canvas4').getContext('2d');
    var grd3 = ctx3.createLinearGradient(0,27,0,0);
    grd3.addColorStop(0, 'white');
    grd3.addColorStop(1, 'black');

    draw();
    draw1();
    draw2();
    draw3();
    function draw(){

      ctx.clearRect(0, -100, 242, 306);
      ctx.globalAlpha = c;

      ctx.beginPath();
      ctx.fillStyle = grd;
      ctx.fillRect(2, 27, 2.5, zero);
      ctx.fillRect(9, 27, 2.5, zero);
      ctx.fillRect(16, 27, 2.5, zero);
      ctx.fillRect(23, 27, 2.5, zero);
      ctx.fillRect(30, 27, 2.5, zero);

      ctx.fillRect(37, 27, 2.5, zero);
      ctx.fillRect(44, 27, 2.5, zero);
      ctx.fillRect(51, 27, 2.5, zero);
      ctx.fillRect(58, 27, 2.5, zero);
      ctx.fillRect(65, 27, 2.5, zero);

      ctx.fillRect(72, 27, 2.5, zero);
      ctx.fillRect(79, 27, 2.5, zero);
      ctx.fillRect(86, 27, 2.5, zero);
      ctx.fillRect(93, 27, 2.5, zero);
      ctx.fillRect(100, 27, 2.5, zero);

      ctx.fillRect(107, 27, 2.5, zero);
      ctx.fillRect(114, 27, 2.5, zero);
      ctx.fillRect(121, 27, 2.5, zero);
      ctx.fillRect(128, 27, 2.5, zero);
      ctx.fillRect(135, 27, 2.5, zero);

      ctx.fillRect(142, 27, 2.5, zero);
      ctx.fillRect(149, 27, 2.5, zero);

      if(zero >= -97){
        zero -= 0.4;
        c -= 0.0065;
      }
      else{
        zero = 0;
        c = 0.7;
      }

      ctx.closePath();

      requestAnimationFrame(draw);
    }


    function draw1(){

      ctx1.clearRect(0, -100, 242, 306);
      ctx1.globalAlpha = c1;

      ctx1.beginPath();
      ctx1.fillStyle = grd1;
      ctx1.fillRect(2, 27, 2.5, zero1);
      ctx1.fillRect(9, 27, 2.5, zero1);
      ctx1.fillRect(16, 27, 2.5, zero1);
      ctx1.fillRect(23, 27, 2.5, zero1);
      ctx1.fillRect(30, 27, 2.5, zero1);

      ctx1.fillRect(37, 27, 2.5, zero1);
      ctx1.fillRect(44, 27, 2.5, zero1);
      ctx1.fillRect(51, 27, 2.5, zero1);
      ctx1.fillRect(58, 27, 2.5, zero1);
      ctx1.fillRect(65, 27, 2.5, zero1);

      ctx1.fillRect(72, 27, 2.5, zero1);
      ctx1.fillRect(79, 27, 2.5, zero1);
      ctx1.fillRect(86, 27, 2.5, zero1);
      ctx1.fillRect(93, 27, 2.5, zero1);
      ctx1.fillRect(100, 27, 2.5, zero1);

      ctx1.fillRect(107, 27, 2.5, zero1);
      ctx1.fillRect(114, 27, 2.5, zero1);
      ctx1.fillRect(121, 27, 2.5, zero1);
      ctx1.fillRect(128, 27, 2.5, zero1);
      ctx1.fillRect(135, 27, 2.5, zero1);

      ctx1.fillRect(142, 27, 2.5, zero1);
      ctx1.fillRect(149, 27, 2.5, zero1);

      if(zero1 >= -97){
        zero1 -= 0.4;
        c1 -= 0.0085;
      }
      else{
        zero1 = 0;
        c1 = 0.9;
      }

      ctx1.closePath();

      requestAnimationFrame(draw1);
    }

    function draw2(){

      ctx2.clearRect(0, -100, 242, 306);
      ctx2.globalAlpha = c2;

      ctx2.beginPath();
      ctx2.fillStyle = grd2;
      ctx2.fillRect(2, 27, 2.5, zero2);
      ctx2.fillRect(9, 27, 2.5, zero2);
      ctx2.fillRect(16, 27, 2.5, zero2);
      ctx2.fillRect(23, 27, 2.5, zero2);
      ctx2.fillRect(30, 27, 2.5, zero2);

      ctx2.fillRect(37, 27, 2.5, zero2);
      ctx2.fillRect(44, 27, 2.5, zero2);
      ctx2.fillRect(51, 27, 2.5, zero2);
      ctx2.fillRect(58, 27, 2.5, zero2);
      ctx2.fillRect(65, 27, 2.5, zero2);

      ctx2.fillRect(72, 27, 2.5, zero2);
      ctx2.fillRect(79, 27, 2.5, zero2);
      ctx2.fillRect(86, 27, 2.5, zero2);
      ctx2.fillRect(93, 27, 2.5, zero2);
      ctx2.fillRect(100, 27, 2.5, zero2);

      ctx2.fillRect(107, 27, 2.5, zero2);
      ctx2.fillRect(114, 27, 2.5, zero2);
      ctx2.fillRect(121, 27, 2.5, zero2);
      ctx2.fillRect(128, 27, 2.5, zero2);
      ctx2.fillRect(135, 27, 2.5, zero2);

      ctx2.fillRect(142, 27, 2.5, zero2);
      ctx2.fillRect(149, 27, 2.5, zero2);

      if(zero2 >= -97){
        zero2 -= 0.4;
        c2 -= 0.0065;
      }
      else{
        zero2 = 0;
        c2 = 0.7;
      }

      ctx2.closePath();

      requestAnimationFrame(draw2);
    }

    function draw3(){

      ctx3.clearRect(0, -100, 242, 306);
      ctx3.globalAlpha = c3;

      ctx3.beginPath();
      ctx3.fillStyle = grd3;
      ctx3.fillRect(2, 27, 2.5, zero3);
      ctx3.fillRect(9, 27, 2.5, zero3);
      ctx3.fillRect(16, 27, 2.5, zero3);
      ctx3.fillRect(23, 27, 2.5, zero3);
      ctx3.fillRect(30, 27, 2.5, zero3);

      ctx3.fillRect(37, 27, 2.5, zero3);
      ctx3.fillRect(44, 27, 2.5, zero3);
      ctx3.fillRect(51, 27, 2.5, zero3);
      ctx3.fillRect(58, 27, 2.5, zero3);
      ctx3.fillRect(65, 27, 2.5, zero3);

      ctx3.fillRect(72, 27, 2.5, zero3);
      ctx3.fillRect(79, 27, 2.5, zero3);
      ctx3.fillRect(86, 27, 2.5, zero3);
      ctx3.fillRect(93, 27, 2.5, zero3);
      ctx3.fillRect(100, 27, 2.5, zero3);

      ctx3.fillRect(107, 27, 2.5, zero3);
      ctx3.fillRect(114, 27, 2.5, zero3);
      ctx3.fillRect(121, 27, 2.5, zero3);
      ctx3.fillRect(128, 27, 2.5, zero3);
      ctx3.fillRect(135, 27, 2.5, zero3);

      ctx3.fillRect(142, 27, 2.5, zero3);
      ctx3.fillRect(149, 27, 2.5, zero3);

      if(zero3 >= -97){
        zero3 -= 0.4;
        c3 -= 0.0085;
      }
      else{
        zero3 = 0;
        c3 = 0.9;
      }

      ctx3.closePath();

      requestAnimationFrame(draw3);
    }



    function drawOne(){

      ctxOne.clearRect(-480, -20, 1000, 480);

      ctxOne.beginPath();
      ctxOne.rotate(45*Math.PI/180);
      ctxOne.fillRect(-10, -20, 10, 400);
      ctxOne.setTransform(1, 0, 0, 1, posOne.x, 0);

      ctxOne.rotate(45*Math.PI/180);
      ctxOne.fillRect(-10, -20, 10, 400);
      ctxOne.setTransform(1, 0, 0, 1, posOne.y, 0);

      ctxOne.rotate(45*Math.PI/180);
      ctxOne.fillRect(-10, -20, 10, 400);
      ctxOne.setTransform(1, 0, 0, 1, posOne.z, 0);

      ctxOne.rotate(45*Math.PI/180);
      ctxOne.fillRect(-10, -20, 10, 400);
      ctxOne.setTransform(1, 0, 0, 1, posOne.w, 0);

      ctxOne.rotate(45*Math.PI/180);
      ctxOne.fillRect(-10, -20, 10, 400);
      ctxOne.setTransform(1, 0, 0, 1, posOne.o, 0);

      ctxOne.rotate(45*Math.PI/180);
      ctxOne.fillRect(-10, -20, 10, 400);
      ctxOne.setTransform(1, 0, 0, 1, posOne.l, 0);

      ctxOne.rotate(45*Math.PI/180);
      ctxOne.fillRect(-10, -20, 10, 400);
      ctxOne.setTransform(1, 0, 0, 1, posOne.p, 0);
      ctxOne.closePath();

      if(posOne.x <= 474){
        posOne.x += widthingOne;
      }
      else{
        posOne.x = 0;
      }

      if(posOne.y <= 474){
        posOne.y += widthingOne;
      }
      else{
        posOne.y = 0;
      }

      if(posOne.z <= 474){
        posOne.z += widthingOne;
      }
      else{
        posOne.z = 0;
      }

      if(posOne.w <= 474){
        posOne.w += widthingOne;
      }
      else{
        posOne.w = 0;
      }

      if(posOne.o <= 474){
        posOne.o += widthingOne;
      }
      else{
        posOne.o = 0;
      }

      if(posOne.l <= 474){
        posOne.l += widthingOne;
      }
      else{
        posOne.l = 0;
      }

      if(posOne.p <= 474){
        posOne.p += widthingOne;
      }
      else{
        posOne.p = 0;
      }

      requestAnimationFrame(drawOne);
    }

    function drawTwo(){

      ctxTwo.clearRect(-480, -20, 1000, 480);

      ctxTwo.beginPath();
      ctxTwo.rotate(45*Math.PI/180);
      ctxTwo.fillRect(-10, -20, 10, 400);
      ctxTwo.setTransform(1, 0, 0, 1, posTwo.x, 0);

      ctxTwo.rotate(45*Math.PI/180);
      ctxTwo.fillRect(-10, -20, 10, 400);
      ctxTwo.setTransform(1, 0, 0, 1, posTwo.y, 0);

      ctxTwo.rotate(45*Math.PI/180);
      ctxTwo.fillRect(-10, -20, 10, 400);
      ctxTwo.setTransform(1, 0, 0, 1, posTwo.z, 0);

      ctxTwo.rotate(45*Math.PI/180);
      ctxTwo.fillRect(-10, -20, 10, 400);
      ctxTwo.setTransform(1, 0, 0, 1, posTwo.w, 0);

      ctxTwo.rotate(45*Math.PI/180);
      ctxTwo.fillRect(-10, -20, 10, 400);
      ctxTwo.setTransform(1, 0, 0, 1, posTwo.o, 0);

      ctxTwo.rotate(45*Math.PI/180);
      ctxTwo.fillRect(-10, -20, 10, 400);
      ctxTwo.setTransform(1, 0, 0, 1, posTwo.l, 0);

      ctxTwo.rotate(45*Math.PI/180);
      ctxTwo.fillRect(-10, -20, 10, 400);
      ctxTwo.setTransform(1, 0, 0, 1, posTwo.p, 0);
      ctxTwo.closePath();

      if(posTwo.x <= 474){
        posTwo.x += widthingTwo;
      }
      else{
        posTwo.x = 0;
      }

      if(posTwo.y <= 474){
        posTwo.y += widthingTwo;
      }
      else{
        posTwo.y = 0;
      }

      if(posTwo.z <= 474){
        posTwo.z += widthingTwo;
      }
      else{
        posTwo.z = 0;
      }

      if(posTwo.w <= 474){
        posTwo.w += widthingTwo;
      }
      else{
        posTwo.w = 0;
      }

      if(posTwo.o <= 474){
        posTwo.o += widthingTwo;
      }
      else{
        posTwo.o = 0;
      }

      if(posTwo.l <= 474){
        posTwo.l += widthingTwo;
      }
      else{
        posTwo.l = 0;
      }

      if(posTwo.p <= 474){
        posTwo.p += widthingTwo;
      }
      else{
        posTwo.p = 0;
      }

      requestAnimationFrame(drawTwo);
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){

    Time();
    function Time(){
      var now = new Date();
      var h = now.getHours();
      var m = now.getMinutes();
      var s = now.getSeconds();
      h = checkTime(h);
      m = checkTime(m);
      s = checkTime(s);

      $('.app_two ul li:nth-child(2) p').html(h+":"+m+":"+s);

      setTimeout(Time, 500);
    }
    function checkTime(i){
      if(i < 10){
        return "0"+i;
      }
      else{
        return i;
      }
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var count = 0;

    timer();
    function timer(){
       /* $("#seconds").html(pad(++sec%60)); */
      count++;
      if(count > 9){
        count = 0;
      }
      $('.app_two ul li:nth-child(3) p').html('0'+count);

      setTimeout(timer, 2500);
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '';
    timeOut();
    function timeOut(){
      var sentence = '', speed = 6, i = 0;
      var randomNounOne = Math.floor(Math.random()*ArryNoun.length),
          randomNounTwo = Math.floor(Math.random()*ArryNoun.length),
          randomVerb = Math.floor(Math.random()*ArryVerb.length),
          randomAdj  = Math.floor(Math.random()*ArryAdj.length),
          randomAdv = Math.floor(Math.random()*ArryAdv.length);

      sentence = ArryNoun[randomNounOne]+' '+ArryVerb[randomVerb]+' '+ArryAdj[randomAdj]+' '+ArryNoun[randomNounTwo]+' '+ArryAdv[randomAdv]+'. ';

      $('.app_two ul li:nth-child(4) p').html(function() {
        mass += sentence;
        return mass;
      });

      if(mass.length > 760 || mass.length % 760 == 0){
        mass = mass.substring(40,mass.length);
      }

      setTimeout(timeOut, (speed*sentence.length));
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var pid = [], i = 0, j = 0, mass = '', user = 'UNKNOWN', pri = '20', ni = '0', virt, res, shr, s = 'S', cpu, mem, timeOne, timeTwo,
        command = ['SYSTEM', 'Parapluie', 'System Interrupts', 'Unknown', 'Service Host: Network Connected Devices',
                   'Service Host: Local Service', 'Service Host: DNS Client', 'Service Host: DHCP Client',
                   'Service Host: Device Association Service', 'Console Window Host', 'Service Host: Network Connection Broker',
                   'Service Host: Network Location Awareness', 'Service Host: Network Store Interface Service', 'Not Found',
                   'explorer', 'Hacked', 'System Setting Broker', 'Session Manager', 'Desktop Window Manager', 'Service Host: Event Log',
                   'Runtime Broker', 'Service Host: Network List Service', 'Application Frame Host', 'Service Host: Local System',
                   'Application', 'Grifon Server', 'Application Dolls Information', ''];

    for(i = 0; i < 12; i++){
      $('.app_fou ul li:nth-child(3)').append('<p></p>');
    }

    genPID(mass);
    genUSER(mass);
    genPRI(mass);
    genNI(mass);
    setTimeout(function(){genVIRT(mass)}, 500);
    genRES(mass);
    setTimeout(function(){genSHR(mass)}, 1500);
    genS(mass);
    setTimeout(function(){genCPU(mass)}, 1000);
    setTimeout(function(){genMEM(mass)}, 2500);
    genTIME(mass);
    genCOMMAND(mass);

    function genCOMMAND(mass){
      mass = '';

      for(i = 0; i < 22; i++){
        do{
          pid[i] = command[Math.floor((Math.random()*command.length))];
          for(j = 0; j < i; j++){
            if(pid[j] == pid[i]){
              break;
            }
          }
        }while(j < i);
        mass += pid[i]+'<br>';
      }

      $('.app_fou ul li:nth-child(3) p:nth-child(12)').html(mass);

      setTimeout(genCOMMAND, 1500);
    }
    function genTIME(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        timeOne = Math.floor((Math.random()*60));
        timeTwo = Math.floor((Math.random()*2));
        if(timeOne < 10){
          timeOne = '0'+timeOne;
        }
        mass += '00.0'+timeTwo+'.'+timeOne+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(11)').html(mass);
      }

      setTimeout(genTIME, 1500);
    }
    function genMEM(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        mem = Math.floor((Math.random()*2));

        mass += '0.'+mem+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(10)').html(mass);
      }

      setTimeout(genMEM, 2000);
    }
    function genCPU(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        cpu = Math.floor((Math.random()*2));

        mass += '0.'+cpu+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(9)').html(mass);
      }

      setTimeout(genCPU, 1500);
    }
    function genS(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        mass += s+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(8)').html(mass);
      }
    }
    function genSHR(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        shr = Math.floor((Math.random()*9000)+1000);

        mass += shr+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(7)').html(mass);
      }

      setTimeout(genSHR, 2000);
    }
    function genRES(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        res = Math.floor((Math.random()*9000)+1000);

        mass += res+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(6)').html(mass);
      }

      setTimeout(genRES, 2000);
    }
    function genVIRT(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        virt = Math.floor((Math.random()*90000)+10000);

        mass += virt+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(5)').html(mass);
      }

      setTimeout(genVIRT, 2000);
    }
    function genNI(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        mass += ni+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(4)').html(mass);
      }
    }
    function genPRI(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        mass += pri+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(3)').html(mass);
      }
    }
    function genUSER(mass){
      mass = '';
      for(i = 0; i < 22; i++){
        mass += user+'<br>';

        $('.app_fou ul li:nth-child(3) p:nth-child(2)').html(mass);
      }
    }
    function genPID(mass){
      mass = '';

      for(i = 0; i < 22; i++){
        do{
          pid[i] = Math.floor((Math.random()*22)+7720);
          for(j = 0; j < i; j++){
            if(pid[j] == pid[i]){
              break;
            }
          }
        }while(j < i);
        mass += pid[i]+'<br>';
      }

      $('.app_fou ul li:nth-child(3) p:nth-child(1)').html(mass);

      setTimeout(genPID, 2000);
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var arryOne = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        arryTwo = ['81', '87', '69', '82', '84', '89', '85', '73', '79', '80'],
        arryThr = ['65', '83', '68', '70', '71', '72', '74', '75', '76', '58'],
        arryFou = ['90', '88', '67', '86', '66', '78', '77', '44', '46', '35'];

    var arryCharOne = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
    var arryCharTwo = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ':'];
    var arryCharThr = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '#'];
    var i = 0;

    $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(1)').append('<p onclick=clearESC()>ESC</p>');
    $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(2)').append('<p>TAB</p>');
    $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(3)').append('<p>CAPS</p>');
    $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(4)').append('<p>SHIFT</p>');

    for(i = 0; i < 10; i++){
      $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(1)').append('<p onclick=keyboard('+arryOne[i]+')>'+arryOne[i]+'</p>');
      $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(2)').append('<p onclick=keyboard('+arryTwo[i]+')>'+arryCharOne[i]+'</p>');
      $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(3)').append('<p onclick=keyboard('+arryThr[i]+')>'+arryCharTwo[i]+'</p>');
      $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(4)').append('<p onclick=keyboard('+arryFou[i]+')>'+arryCharThr[i]+'</p>');
    }

    $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(1)').append('<p onclick=clearBACK()>BACK</p>');
    $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(3)').append('<p onclick=clearENTER()>ENTER</p>');
    $('.app_fou ul:nth-child(1) li:nth-child(4) div:nth-child(4)').append('<p>SHIFT</p>');
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    timeOut();
    function timeOut(){
      var randomNumOne = Math.floor((Math.random()*999)),
          randomNumTwo = Math.floor((Math.random()*999)),
          randomNumThr = Math.floor((Math.random()*999)),
          randomNumFou = Math.floor((Math.random()*999)),
          randomNumFiv = Math.random()*100,
          randomNumSix = Math.random()*100,
          randomNumSev = Math.random()*100;

      $('.app_fiv ul li:nth-child(2) p').html(randomNumOne+' '+randomNumTwo+' '+randomNumThr+' '+randomNumFou);
      $('.app_fiv ul li:nth-child(3) p:nth-child(1)').html(randomNumFiv.toFixed(6));
      $('.app_fiv ul li:nth-child(3) p:nth-child(2)').html(randomNumSix.toFixed(6));
      $('.app_fiv ul li:nth-child(3) p:nth-child(3)').html(randomNumSev.toFixed(6));

      setTimeout(timeOut, 2000);
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    audio();
    function audio(){
      var audioElement = document.createElement('audio');
      audioElement.setAttribute('src', './song/Singularity E3.ogg');
      audioElement.volume = 0.6;
      audioElement.setAttribute('loop', 'loop');
      //audioElement.load()
        $.get();
        audioElement.addEventListener("load", function(){
          audioElement.play();
        }, true);

      $('.app_six ul li:nth-child(2)').click(function(){
        if(audioElement.paused){
          audioElement.play();
        }
        else{
          audioElement.pause();
        }
      });
      $('.app_six ul li:nth-child(3) p:nth-child(6)').click(function(){
        audioElement.volume = 1.0;
      });
      $('.app_six ul li:nth-child(3) p:nth-child(5)').click(function(){
        audioElement.volume = 0.8;
      });
      $('.app_six ul li:nth-child(3) p:nth-child(4)').click(function(){
        audioElement.volume = 0.6;
      });
      $('.app_six ul li:nth-child(3) p:nth-child(3)').click(function(){
        audioElement.volume = 0.4;
      });
      $('.app_six ul li:nth-child(3) p:nth-child(2)').click(function(){
        audioElement.volume = 0.2;
      });
      $('.app_six ul li:nth-child(3) p:nth-child(1)').click(function(){
        audioElement.volume = 0.0;
      });
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    var mass = '', randomNumOne, randomNumTwo, randomNumThr, i = 0;

    genRandomNumOne(mass);
    setTimeout(genRandomNumTwo, 800);
    setTimeout(genRandomNumThr, 300);
    function genRandomNumOne(mass){
      mass = '';
      for(i = 0; i < 9; i++){
        randomNumOne = Math.floor((Math.random()*1000000000));

        mass += randomNumOne+'<br>';

        $('.app_six ul li:nth-child(4) p:nth-child(1)').html(mass);
      }

      setTimeout(genRandomNumOne, 800);
    }
    function genRandomNumTwo(mass){
      mass = '';
      for(i = 0; i < 9; i++){
        randomNumTwo = Math.floor((Math.random()*1000000000));

        mass += randomNumTwo+'<br>';

        $('.app_six ul li:nth-child(4) p:nth-child(2)').html(mass);
      }

      setTimeout(genRandomNumTwo, 1000);
    }
    function genRandomNumThr(mass){
      mass = '';
      for(i = 0; i < 9; i++){
        randomNumThr = Math.floor((Math.random()*1000000000));

        mass += randomNumThr+'<br>';

        $('.app_six ul li:nth-child(4) p:nth-child(3)').html(mass);
      }

      setTimeout(genRandomNumThr, 900);
    }
  });
  </script>

  <script language="javascript" type="text/javascript">
  $(document).ready(function(){
    setTimeout(function(){
      $('.one ul li:nth-child(1)').animate({
        'opacity' : '1'
      }, 500);
    }, 500);

    setTimeout(function(){
      $('.app_thr').animate({
        'opacity' : '1'
      }, 40);
      $('.app_thr').animate({
        'opacity' : '0'
      }, 40);
      $('.app_thr').animate({
        'opacity' : '1'
      }, 40);
    }, 14000);

    setTimeout(function(){
      $('.app_one').animate({
        'opacity' : '1'
      }, 40);
      $('.app_one').animate({
        'opacity' : '0'
      }, 40);
      $('.app_one').animate({
        'opacity' : '1'
      }, 40);
    }, 14150);

    setTimeout(function(){
      $('.app_fiv').animate({
        'opacity' : '1'
      }, 40);
      $('.app_fiv').animate({
        'opacity' : '0'
      }, 40);
      $('.app_fiv').animate({
        'opacity' : '1'
      }, 40);
    }, 14300);

    setTimeout(function(){
      $('.app_two').animate({
        'opacity' : '1'
      }, 40);
      $('.app_two').animate({
        'opacity' : '0'
      }, 40);
      $('.app_two').animate({
        'opacity' : '1'
      }, 40);
    }, 14450);

    setTimeout(function(){
      $('.app_six').animate({
        'opacity' : '1'
      }, 40);
      $('.app_six').animate({
        'opacity' : '0'
      }, 40);
      $('.app_six').animate({
        'opacity' : '1'
      }, 40);
    }, 14600);

    setTimeout(function(){
      $('.app_fou').animate({
        'opacity' : '1'
      }, 40);
      $('.app_fou').animate({
        'opacity' : '0'
      }, 40);
      $('.app_fou').animate({
        'opacity' : '1'
      }, 40);
    }, 14750);
  });
  </script>
</head>
<body>
  <div id="wrap">
    <div id="op_wrap">
      <div class="op_element one">
        <ul>
          <li><img src="./image/lock.png"/></li>
          <li><canvas width="116" height="24" id="canvasOne"></canvas></li>
          <li><p></p></li>
          <li><div></div></li>
          <li><p></p></li>
        </ul>
      </div>
      <div class="op_element two">
        <ul>
          <li>
            <ul>
              <li><img src="./image/cmd.png"/></li>
              <li><p></p></li>
            </ul>
          </li>
          <li>
            <ul>
              <li><img src="./image/cmd.png"/></li>
              <li><p></p></li>
            </ul>
          </li>
          <li>
            <ul>
              <li><img src="./image/cmd.png"/></li>
              <li><p></p></li>
            </ul>
          </li>
          <li>
            <ul>
              <li><img src="./image/cmd.png"/></li>
              <li><p></p></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div id="apps_wrap">
      <div class="apps app_one">
        <ul>
          <li></li>
          <li><p>00:00:00:00</p></li>
          <li>
            <p></p>
            <p></p>
            <p></p>
          </li>
          <li><canvas width="234" height="234" id="canvasTwo"></canvas></li>
        </ul>
      </div>
      <div class="apps app_two">
        <ul>
          <li></li>
          <li><p>00:00:00</p></li>
          <li><p>00</p></li>
          <li><p></p></li>
        </ul>
      </div>
      <div class="apps app_thr">
        <ul>
          <li></li>
          <li><canvas width="310" height="76" id="canvasThr"></canvas></li>
        </ul>
      </div>
      <div class="apps app_fou">
        <ul>
          <li></li>
          <li>
            <p></p>
            <p></p>
            <p>00:00:00:00</p>
          </li>
          <li></li>
          <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </li>
          <li><p></p></li>
          <li>
            <p></p>
            <p></p>
            <p></p>
          </li>
        </ul>
      </div>
      <div class="apps app_fiv">
        <ul>
          <li></li>
          <li><p></p></li>
          <li>
            <p></p>
            <p></p>
            <p></p>
          </li>
        </ul>
      </div>
      <div class="apps app_six">
        <ul>
          <li></li>
          <li></li>
          <li>
            <p>0</p>
            <p>20</p>
            <p>40</p>
            <p>60</p>
            <p>80</p>
            <p>100</p>
          </li>
          <li>
            <p></p>
            <p></p>
            <p></p>
          </li>
          <li>
            <canvas width="152" height="27" id="canvas1"></canvas>
            <canvas width="152" height="27" id="canvas2"></canvas>
            <canvas width="152" height="27" id="canvas3"></canvas>
            <canvas width="152" height="27" id="canvas4"></canvas>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>
